<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-goods"></i> 商品管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>商品列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-row>
                    <el-col :span="8">
                        <el-button
                            type="danger"
                            icon="el-icon-delete"
                            class="handle-del mr10"
                            @click="delAllSelection"
                        >批量删除</el-button>
                        <el-button
                            type="primary"
                            icon="el-icon-circle-plus-outline"
                            class="handle-del mr10"
                            @click="handleEdit(-1,null)"
                        >添加商品</el-button>
                    </el-col>
                    <el-col :span="16" style="display:flex;justify-content: center;">
                        <el-select
                                v-model="query.status"
                                placeholder="状态"
                                style="width:120px;margin-right:10px"
                        >
                            <el-option key="" label="全部" value=""></el-option>
                            <el-option key="0" label="未上架" value="0"></el-option>
                            <el-option key="1" label="已上架" value="1"></el-option>
                            <el-option key="2" label="已删除" value="2"></el-option>
                            <el-option key="3" label="授权成功" value="3"></el-option>
                            <el-option key="4" label="授权失败" value="4"></el-option>
                        </el-select>
                        <el-select
                            v-model="query.sort"
                            placeholder="选择排序方式"
                            style="width:120px;margin-right:10px"
                        >
                            <el-option key="1" label="正序" value="1"></el-option>
                            <el-option key="2" label="倒序" value="2"></el-option>
                        </el-select>
                        <!--账号类型：1：QQ账号，2：微信账号,0其它-->
                        <el-select
                                v-model="query.zhanghao_type"
                                placeholder="设备类型"
                                style="width:120px;margin-right:10px"
                        >
                            <el-option key="" label="全部" value=""></el-option>
                            <el-option key="0" label="其它" value="0"></el-option>
                            <el-option key="1" label="QQ" value="1"></el-option>
                            <el-option key="2" label="微信" value="2"></el-option>
                        </el-select>
                        <el-input
                            v-model="query.name"
                            style="width:200px"
                            placeholder="商品名称"
                            class="handle-input mr10"
                        ></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-table
                :data="tableData"
                border
                v-loading="loading"
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" width="60" sortable align="center"></el-table-column>
                <el-table-column label="标题名称" align="center">
                    <template slot-scope="scope">
                        <div class="goods_name">{{scope.row.name}}</div>

                    </template>
                </el-table-column>
                <el-table-column label="商品图片" align="center">
                    <template slot-scope="scope">
                        <el-image
                            class="table-td-thumb"
                            :src="scope.row.banner[0]"
                            :preview-src-list="scope.row.banner"
                        ></el-image>
                        <p>{{scope.row.game_name}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="价格/1小时" prop="price" align="center"></el-table-column>
                <el-table-column label="价格/10小时" prop="price_ten" align="center"></el-table-column>
                <el-table-column label="价格/每天" prop="price_day" align="center"></el-table-column>
                <el-table-column label="几小时起租" prop="limit_hour" align="center"></el-table-column>
                <el-table-column label="排序" prop="sort" sortable align="center"></el-table-column>
                <!--<el-table-column label="商品所属"  align="center">-->
                    <!--<template slot-scope="scope">-->
                        <!--<el-tag-->
                        <!--&gt;{{scope.row.status==1?'租号':'代练'}}</el-tag>-->
                    <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column label="上号类型"  align="center">
                    <template slot-scope="scope">
                        <el-tag
                        >{{scope.row.upper_type==1?'快速上号':'协助上号'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="设备类型"  align="center">
                    <template slot-scope="scope">
                        <el-tag
                        >{{scope.row.sb_type==1?'安卓':'苹果'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="账号类型"  align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.zhanghao_type==1">QQ账号</el-tag>
                        <el-tag v-if="scope.row.zhanghao_type==2">微信账号</el-tag>
                        <el-tag v-if="scope.row.zhanghao_type==0">其它</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="有无押金"  align="center">
                    <template slot-scope="scope">
                        <el-tag
                        >{{scope.row.deposit_type==1?'无':'有'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="押金" prop="deposit" align="center"></el-table-column>
                <el-table-column label="是否验号"  align="center">
                    <template slot-scope="scope">
                        <el-tag
                        >{{scope.row.is_yanhao==1?'未验号':'已验号'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否上架"  align="center">
                    <template slot-scope="scope">
                        <el-tag
                        >{{scope.row.status==1?'已上架':'已下架'}}</el-tag>
                    </template>
                </el-table-column>
                <!--<el-table-column label="商品折扣" prop="discount" align="center"></el-table-column>-->
                <el-table-column prop="bt_padCode" label="云手机编号"></el-table-column>
                <el-table-column prop="qq_account" label="QQ账号"></el-table-column>
                <el-table-column prop="qq_password" label="QQ密码"></el-table-column>
                <el-table-column prop="wx_account" label="微信号"></el-table-column>
                <el-table-column prop="email_account" label="邮箱账号"></el-table-column>
                <el-table-column prop="email_account_password" label="邮箱账号密码"></el-table-column>
                <el-table-column prop="mobile_account" label="手机账号"></el-table-column>
                <el-table-column prop="mobile_account_password" label="手机账号密码"></el-table-column>
                <el-table-column prop="yanhao_time" label="验号时间"></el-table-column>
                <el-table-column prop="updated_at" label="修改时间"></el-table-column>
                <el-table-column prop="created_at" label="添加时间"></el-table-column>
                <el-table-column label="操作" width="180" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <!--<el-button-->
                            <!--@click="updateStatus(scope.row.id,scope.$index,scope.row.status)"-->
                            <!--:icon="scope.row.status==1?'el-icon-lx-attentionforbid':'el-icon-lx-attention'"-->
                            <!--type="text"-->
                            <!--:style="{color:scope.row.status==0?'#67C23A':'#E6A23C'}"-->
                        <!--&gt;{{ scope.row.status==1?'下架':'上架' }}</el-button>-->
                        <el-button
                                @click="updateStatus(scope.row.id,scope.$index,scope.row.status)"
                                icon="el-icon-lx-attention"
                                type="text"
                                :style="{color:'#67C23A'}"
                        >下架</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                        <div v-if="scope.row.zhanghao_type==2">
                            <el-button
                                    v-if="scope.row.status==1"
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="handleAuth(scope.$index, scope.row)"
                            >授权</el-button>
                            <el-button
                                    v-if="scope.row.status==3"
                                    type="text"
                                    icon="el-icon-edit"
                            >授权成功</el-button>
                            <el-button
                                    v-if="scope.row.status==3||scope.row.status==4"
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="handleAuth(scope.$index, scope.row,1)"
                            >重新授权</el-button>
                        </div>


                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 添加编辑弹出 -->
        <el-dialog v-dialogDrag :title="formName" :visible.sync="editVisible" width="98%" :lockScroll="false" :top="0">
            <el-form ref="edit" :model="edit" label-width="90px">
            <el-row :model="edit" label-width="70px">
                <el-form-item label="标题名称" class="form-item">
                    <el-input
                        type="text"
                        v-model="edit.name"
                        maxlength="150"
                        minlength="1"
                        placeholder="请输入名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="每小时价格" class="form-item">
                    <el-input
                        type="number"
                        v-model="edit.price"
                        maxlength="30"
                        minlength="0"
                        placeholder="请输入价格"
                    ></el-input>
                </el-form-item>
                <el-form-item label="10小时价格" class="form-item">
                    <el-input
                            type="number"
                            v-model="edit.price_ten"
                            maxlength="30"
                            minlength="0"
                            placeholder="请输入价格"
                    ></el-input>
                </el-form-item>
                <el-form-item label="日租价格" class="form-item">
                    <el-input
                            type="number"
                            v-model="edit.price_day"
                            maxlength="30"
                            minlength="0"
                            placeholder="请输入价格"
                    ></el-input>
                </el-form-item>
                <el-form-item label="几小时起租" class="form-item">
                    <el-input
                            type="number"
                            v-model="edit.limit_hour"
                            maxlength="30"
                            minlength="0"
                            placeholder="请输入"
                    ></el-input>
                </el-form-item>



                <!--<el-input-->
                        <!--type="text"-->
                        <!--v-model="edit.discount"-->
                        <!--maxlength="30"-->
                        <!--minlength="2"-->
                        <!--placeholder="请输入折扣，没有可不填"-->
                <!--&gt;</el-input>-->
                <!--</el-form-item>-->
                <el-form-item label="排序" class="form-item">
                    <el-input
                        v-model="edit.sort"
                        maxlength="2"
                        minlength="1"
                        type="number"
                        placeholder="请输入排序"
                    ></el-input>
                    <p style="color: red;font-size: 13px">注：越小越靠前</p>
                </el-form-item>
                <el-form-item label="关联游戏" class="form-item">
                    <el-select
                            v-model="edit.to_goods"
                            placeholder="选择游戏"
                            style="width:120px;margin-right:10px"
                            @change="showGame"

                    >
                        <template v-for="(item) in goodsAll">
                            <el-option
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            ></el-option>
                        </template>
                    </el-select>
                    <el-button @click="edit.to_goods =''">重置</el-button>

                </el-form-item>
                <!--游戏属性-->
              <div class="game_select">
                            <div class="attr_box" style="display: flex;flex-wrap:wrap;border: 1px dotted;align-items: center;text-align: center">
                      <template  v-for="(o, index) in attr_data" >
                          <div   style="padding: 5px">
                              <div style="font-weight: bold;font-size: 13px;"> {{o.name}}<span style="color: #409EFF;font-size: 12px">(一级)</span></div>
                              <div  style="display: flex;flex-wrap:wrap;align-items: center">
                                  <template  v-for="(two, index1) in o.two_list" >
                                      <div style="font-weight: bold;font-size: 13px;padding: 5px;border: 1px dotted;" > {{two.name}}<span style="color: #409EFF;font-size: 12px">(二级)</span>
                                          <div  style="display: flex;flex-wrap:wrap;align-items: center">
                                              <div style="font-weight: bold;font-size: 13px;padding: 5px;border: 1px dotted;" v-for="(attr, index2) in two.attr_list" :key="index2">
                                                  {{attr.name}}<span style="color: #409EFF;font-size: 12px">(三级)&nbsp;<i style="font-size: 14px" class="el-icon-circle-close" @click="del_attr(attr.id)"></i></span>
                                              </div>
                                          </div>
                                      </div>

                                  </template>


                              </div>
                          </div>
                      </template>
                  </div>
              </div>

                <el-form-item label="添加详情" class="form-item" v-show="edit.game_id == 1">
                    <el-row>
                        <el-col>
                            <span>角色名</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.jues_name"
                                    maxlength="60"
                                    minlength="1"
                                    placeholder="角色名"
                            ></el-input>
                        </el-col>
                        <el-col>
                            <span>英雄数量</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.yxsl_num"
                                    maxlength="10"
                                    minlength="0"
                                    placeholder="英雄数量"
                            ></el-input>
                        </el-col>
                        <el-col>
                            <span>皮肤数量</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.pifu_num"
                                    maxlength="10"
                                    minlength="0"
                                    placeholder="皮肤数量"
                            ></el-input>
                        </el-col>
                        <el-col>
                            <span>典藏皮肤数</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.dianchang_pifu_num"
                                    maxlength="10"
                                    minlength="0"
                                    placeholder="典藏皮肤数"
                            ></el-input>
                        </el-col>
                        <el-col>
                            <span>信誉分</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.xyf_val"
                                    maxlength="10"
                                    minlength="0"
                                    placeholder="信誉分"
                            ></el-input>
                        </el-col>
                        <el-col>
                            <span>VIP等级</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.vip_grade"
                                    maxlength="10"
                                    minlength="0"
                                    placeholder="VIP等级"
                            ></el-input>
                        </el-col>
                        <el-col>
                            <span>段位</span>
                            <el-select
                                    v-model="edit.info.duanwei"
                                    placeholder="选择段位"
                                    style="margin-left:20px"
                            >
                                <template v-for="(item) in duanwei_select">
                                    <el-option
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                    ></el-option>
                                </template>
                            </el-select>
                        </el-col>
                        <el-col>
                            <span>排位赛</span>
                            <el-select
                                    v-model="edit.info.pws_ok"
                                    placeholder="排位赛"
                                    style="margin-left:20px"
                            >
                                <template v-for="(item) in pws_ok_select">
                                    <el-option
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                    ></el-option>
                                </template>
                            </el-select>
                        </el-col>
                        <el-col>
                            <span>服务器区服</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.game_qu"
                                    maxlength="60"
                                    minlength="1"
                                    placeholder=""
                            ></el-input>
                        </el-col>
                        <el-col>
                            <span>区服名称</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.game_qu_name"
                                    maxlength="60"
                                    minlength="1"
                                    placeholder=""
                            ></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="添加详情" class="form-item" v-show="edit.game_id == 2">
                    <el-row>
                        <el-col>
                            <span>载具数量</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.zaiju_name"
                                    maxlength="60"
                                    minlength="1"
                                    placeholder="载具数量"
                            ></el-input>
                        </el-col>
                        <el-col>
                            <span>套装数量</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.taozhuang_num"
                                    maxlength="10"
                                    minlength="0"
                                    placeholder="套装数量"
                            ></el-input>
                        </el-col>
                        <el-col>
                            <span>枪皮数量</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.qiangpi_num"
                                    maxlength="10"
                                    minlength="0"
                                    placeholder="枪皮数量"
                            ></el-input>
                        </el-col>
                        <el-col>
                            <span>粉装数量</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.fengzhuang_num"
                                    maxlength="10"
                                    minlength="0"
                                    placeholder="粉装数量"
                            ></el-input>
                        </el-col>
                        <el-col>
                            <span>特效枪数量</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.tenxiaoqiang_num"
                                    maxlength="10"
                                    minlength="0"
                                    placeholder="特效枪数量"
                            ></el-input>
                        </el-col>
                        <el-col>
                            <span>战备数量</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.zhangbei_num"
                                    maxlength="10"
                                    minlength="0"
                                    placeholder="战备数量"
                            ></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="添加详情" class="form-item" v-show="edit.game_id == 3">
                    <el-row>
                        <el-col>
                            <span>潮流度</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.chaoliudu"
                                    maxlength="60"
                                    minlength="1"
                                    placeholder="潮流度"
                            ></el-input>
                        </el-col>
                        <el-col>
                            <span>紫皮数</span>
                            <el-input
                                    type="text"
                                    v-model="edit.info.zipi_num"
                                    maxlength="10"
                                    minlength="0"
                                    placeholder="紫皮数"
                            ></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>



                <!--<el-form-item label="商品所属">-->
                    <!--<el-select v-model="edit.belong" placeholder="请选择">-->
                        <!--<el-option label="租号" value="1"></el-option>-->
                        <!--<el-option label="代练" value="2"></el-option>-->
                    <!--</el-select>-->
                <!--</el-form-item>-->
                <el-form-item label="上号类型">
                    <el-select v-model="edit.upper_type" placeholder="请选择">
                        <el-option label="快速上号" value="1"></el-option>
                        <el-option label="协助上号" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备类型">
                    <el-select v-model="edit.sb_type" placeholder="请选择">
                        <el-option label="安卓" value="1"></el-option>
                        <el-option label="苹果" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号类型">
                    <el-select v-model="edit.zhanghao_type" placeholder="请选择">
                        <el-option label="QQ账号" value="1"></el-option>
                        <el-option label="微信账号" value="2"></el-option>
                        <el-option label="其它" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="有无押金">
                    <el-select v-model="edit.deposit_type" placeholder="请选择"  @change="depositType">
                        <el-option label="无" value="1"></el-option>
                        <el-option label="有" value="2"></el-option>
                    </el-select>
                    <!--v-show="depositTypeShow"-->
                    <p>押金</p>
                    <el-input
                              type="number"
                              v-model="edit.deposit"
                              maxlength="30"
                              minlength="0"
                              placeholder="请输入押金"
                    ></el-input>
                </el-form-item>
                <el-form-item label="是否上架" prop="status">
                    <el-switch v-model="edit.status" active-value="1" inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="是否验号" prop="is_yanhao">
                    <el-switch v-model="edit.is_yanhao" active-value="2" inactive-value="1"></el-switch>
                </el-form-item>
                <el-form-item label="云手机编号" prop="bt_padCode">
                    <el-input
                            type="text"
                            v-model="edit.bt_padCode"
                            maxlength="120"
                            minlength="0"
                            placeholder="请输入云手机编号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="应用ID" prop="bt_appId">
                    <el-input
                            type="text"
                            v-model="edit.bt_appId"
                            maxlength="100"
                            minlength="0"
                            placeholder="请输入应用ID"
                    ></el-input>
                </el-form-item>
                <el-form-item label="QQ账号" prop="bt_appId">
                    <el-input
                            type="text"
                            v-model="edit.qq_account"
                            maxlength="60"
                            minlength="0"
                            placeholder="请输入QQ账号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="QQ密码" prop="bt_appId">
                    <el-input
                            type="text"
                            v-model="edit.qq_password"
                            maxlength="60"
                            minlength="0"
                            placeholder="请输入QQ密码"
                    ></el-input>
                </el-form-item>
                <el-form-item label="微信号" prop="bt_appId">
                    <el-input
                            type="text"
                            v-model="edit.wx_account"
                            maxlength="60"
                            minlength="0"
                            placeholder="请输入微信号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="邮箱账号" prop="bt_appId">
                    <el-input
                            type="text"
                            v-model="edit.email_account"
                            maxlength="60"
                            minlength="0"
                            placeholder="请输入邮箱账号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="邮箱账号密码" prop="bt_appId">
                    <el-input
                            type="text"
                            v-model="edit.email_account_password"
                            maxlength="60"
                            minlength="0"
                            placeholder="请输入邮箱账号密码"
                    ></el-input>
                </el-form-item>
                <el-form-item label="手机账号" prop="bt_appId">
                    <el-input
                            type="text"
                            v-model="edit.mobile_account"
                            maxlength="60"
                            minlength="0"
                            placeholder="请输入手机账号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="手机账号密码" prop="bt_appId">
                    <el-input
                            type="text"
                            v-model="edit.mobile_account_password"
                            maxlength="60"
                            minlength="0"
                            placeholder="请输入手机账号"
                    ></el-input>
                </el-form-item>
                    <el-form-item label="商品图片" class="form-item">
                    <el-upload
                        class="upload-demo"
                        ref="addUploads"
                        drag
                        :limit="6"
                        :auto-upload="true"
                        show-file-list
                        accept="image/*"
                        :on-success="uploadSuccess"
                        :on-error="uploadError"
                        :on-preview="uploadPreview"
                        :action="api.upload_img_url"
                        list-type="picture-card"
                        :on-exceed="uploadExceed"
                        :file-list="edit.banner_url"
                        multiple
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">
                            将文件拖到此处，或
                            <em>点击上传</em>
                        </div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="详情图" class="form-item">
                    <el-upload
                        class="upload-demo"
                        ref="addUploads"
                        drag
                        :limit="15"
                        :auto-upload="true"
                        show-file-list
                        accept="image/*"
                        :on-success="imagesUploadSuccess"
                        :on-error="uploadError"
                        :on-preview="uploadPreview"
                        :action="api.upload_img_url"
                        list-type="picture-card"
                        :on-exceed="uploadExceed"
                        :file-list="edit.images_url"
                        multiple
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">
                            将文件拖到此处，或
                            <em>点击上传</em>
                        </div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>

                <el-form-item label="描述" label-width="80px">
                    <editor-bar v-model="edit.describe" :isClear="true" @change="contentChange2"></editor-bar>
                </el-form-item>
            </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <div class="dialog-footer-but">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleSave">确 定</el-button>
                </div>
            </span>

        </el-dialog>
        <!--游戏属性-->
        <el-dialog title="游戏属性配置管理" v-dialogDrag :visible.sync="gameCateListVisible" width="80%">
            <el-container style="height: 500px; border: 1px solid #eee">
                <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                    <el-menu>
                        <el-submenu :index="index" v-for="(item,index) in gameCateAll" :key="index">
                            <template slot="title" ><i class="el-icon-menu"></i>{{item.name}}</template>
                            <el-menu-item-group v-for="(child,index2) in item.child" :key="index2">
                                <template slot-scope="scope">
                                    <el-menu-item :index="index2" @click="cateChildClick(child.id)" >{{child.name}}</el-menu-item>
                                </template>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <!--属性配置列表-->
                <el-container>
                    <el-main>
                        <div class="handle-box" style="margin-bottom:50px">
                            <el-col :span="6">
                                <el-button
                                        type="danger"
                                        icon="el-icon-circle-plus-outline"
                                        class="handle-del mr10"
                                        @click="CatedelattrSelection"
                                >确定选择</el-button>
                            </el-col>
                            <el-col :span="12">
                            <el-select v-model="attr_query.sort" placeholder="排序" class="handle-select mr10">
                            <el-option key="1" label="正序" value="1"></el-option>
                            <el-option key="2" label="倒序" value="2"></el-option>
                            </el-select>
                            <el-input v-model="attr_query.name" placeholder="名称" class="handle-input mr10"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="cateattrhandleSearch">搜索</el-button>
                            </el-col>
                        </div>
                        <el-table
                                :data="AttrtableData"
                                border
                                class="table"
                                v-loading="attr_loading"
                                ref="multipleTable"
                                header-cell-class-name="table-header"
                                @selection-change="attrhandleSelectionChange"
                        >
                            <el-table-column type="selection" width="55" align="center"></el-table-column>
                            <el-table-column prop="name" label="名称"></el-table-column>
                            <el-table-column prop="name" label="对应英雄" v-if="attr_query.game_id == 1">
                                <template slot-scope="scope">
                                    <span>{{scope.row.yx_name}}</span>
                                </template>
                            </el-table-column>

                            <el-table-column label="图片(查看大图)" align="center">
                                <template slot-scope="scope">
                                    <el-image
                                            class="table-td-thumb"
                                            :src="scope.row.img_url"
                                            :preview-src-list="[scope.row.img_url]"
                                    ></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column label="排序" prop="sort" sortable="custom"></el-table-column>

                            <el-table-column prop="updated_at" sortable label="修改时间"></el-table-column>
                            <el-table-column prop="created_at" sortable label="添加时间"></el-table-column>
                            <!--<el-table-column label="操作" width="180" align="center">-->
                                <!--<template slot-scope="scope">-->
                                    <!--<el-button-->
                                            <!--type="text"-->
                                            <!--icon="el-icon-edit"-->
                                            <!--@click="handleGameAttrList(scope.$index, scope.row)"-->
                                    <!--&gt;编辑</el-button>-->
                                    <!--<el-button-->
                                            <!--type="text"-->
                                            <!--icon="el-icon-delete"-->
                                            <!--class="red"-->
                                            <!--@click="handleCateAttrDelete(scope.$index, scope.row)"-->
                                    <!--&gt;删除</el-button>-->
                                <!--</template>-->
                            <!--</el-table-column>-->
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                    background
                                    layout="total, prev, pager, next"
                                    :current-page="attr_query.page"
                                    :page-size="attr_query.pageSize"
                                    :total="AttrpageTotal"
                                    @current-change="cateattrhandlePageChange"
                            ></el-pagination>
                        </div>
                    </el-main>
                </el-container>
            </el-container>

        </el-dialog>

        <!--auth cloud game-->
        <el-dialog v-dialogDrag :title="auth_title" :visible.sync="authVisible" width="auto" :lockScroll="false" :top="0">
            <div class="auth_pop">
                请在登录完成后点击<span class="auth_pop_btn" @click="authFinsh(auth_goods_id)">我已登录</span>
            </div>
            <iframe
                    :src="iframeSrc"
                    style="width: 100%;height: 700px;"
                    frameborder="0"
            ></iframe>
        </el-dialog>


        <!-- 预览图片 -->
        <div class="previews" @click="closePreviews" v-if="windowsPopVisible">
            <img :src="windowsPopUrl" title="点击即可关闭预览" />
        </div>
    </div>
</template>

<script>
    import EditorBar from '../../common/wangEnduit';
export default {
    components: { EditorBar },
    name: 'goods',
  data () {
    return {
      query: {
        name: '',
        page: 1,
        pageSize: 10,
        status: '',
        sort: '1',
        zhanghao_type: '',
      },
      formName: '添加商品',
      editVisible: false,
      windowsPopVisible: false,
      authVisible: false,
      auth_title:'',
      auth_goods_id:'',
      iframeSrc: '', // 用于存储iframe的src
      windowsPopUrl: '',
      loading: false,
      tableData: [],
      multipleSelection: [],
      pageTotal: 0,
      goodsAll: [],
      delList: [],
      edit: { to_goods: '' ,info:{jues_name:'',yxsl_num:0,pifu_num:0,dianchang_pifu_num:0,xyf_val:0,vip_grade:'',duanwei:'',pws_ok:'',deposit:0,game_id:0}},
      idx: -1,
      id: -1,


      gameCateListVisible: false,
      gameCateAll:[],AttrtableData:[],  attr_loading: false,AttrpageTotal: 0,
        attr_query: {
            status: '',
            sort: '',
            name: '',
            page: 1,
            pageSize: 10,
            game_id:0,
            left_two_id:0
        },
        cateattrmultipleSelection: [],cateattrdelList:[],attr_data:[],pifu_data:[],attr_ids:[],
        duanwei_select:[
            {'id':"1","name":"倔强青铜"},
            {"id":"2","name":"秩序白银"},
            {"id":"3","name":"荣耀黄金"},
            {"id":"4","name":"尊贵铂金"},
            {"id":"5","name":"永恒钻石"},
            {"id":"6","name":"至尊星耀"},
            {"id":"7","name":"最强王者"},
            {"id":"8","name":"荣耀王者"},
            ],
        pws_ok_select:[
            {'id':"1","name":"允许"},
            {"id":"2","name":"不允许"},
        ],
        depositTypeShow:false,
      //获取列表请求
      getList: function () {
        let that = this;
        this.api.get('goods', this.query, res => {
          for (let i in res.data.list) {
            res.data.list[i].status = res.data.list[i].status + '';
            res.data.list[i].belong = res.data.list[i].belong + '';
            res.data.list[i].is_yanhao = res.data.list[i].is_yanhao + '';
            res.data.list[i].upper_type = res.data.list[i].upper_type + '';
            res.data.list[i].deposit_type = res.data.list[i].deposit_type + '';
            res.data.list[i].sb_type = res.data.list[i].sb_type + '';
            res.data.list[i].zhanghao_type = res.data.list[i].zhanghao_type + '';
          }
          console.log(res.data.list)
          that.tableData = res.data.list;
          that.query.page = res.data.page;
          that.query.pageSize = res.data.pageSize;
          that.pageTotal = res.data.pageTotal;
        }, undefined, undefined, this);
      },
      //删除请求
      delLists: function (ids, msg) {
        let that = this;
        if (ids.length < 1) {
          this.$message.error('请选择删除的数据');
          return false;
        }
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          that.api.delete('delGoods', { ids: ids }, res => {
            that.query.page = 1;
            that.getList();
            that.multipleSelection = [];
            that.$message.success(msg);
          }, undefined, undefined, this);
        }).catch(() => { });
      },
      showIframe(row,state) {
        console.log(row)
        row.bt_appId = row.wx_appid||1
        var userId = row.bt_appId
        var end_s = 3600*24*365*10
        var appId = row.bt_appId
        var padCode = row.bt_padCode
        var goods_id = row.id
        this.iframeSrc = location.protocol+'//'+location.host+`/cloud/game.html?userId=${userId}&end_s=${end_s}&appId=${appId}&padCode=${padCode}&goods_id=${goods_id}&state=${state}`;
        console.log(this.iframeSrc)
        this.authVisible = true;
      },
      handleAuth: function (index, row,state=0) {
        let that = this;
        that.auth_goods_id = row.id
        var  type_name = ''
        var  type_account = ''
        if(row.zhanghao_type == 1){
            type_name = 'QQ账号'
            type_account = row.qq_account
        }
      if(row.zhanghao_type == 2){
          type_name = '微信账号'
          type_account = row.wx_account
      }
      if(row.zhanghao_type == 0){
          type_name = '其它'
          type_account = '-'
      }
        that.auth_title = '云授权-'+row.name+'-'+type_name+'-'+'账号：'+type_account
        that.showIframe(row,state)
      },
    authFinsh: function (id) {
        let that = this;
        var ids = [id]
        this.$confirm('需要保证游戏在已登录状态，否则买家将无法上号，是否确认操作?', '提示', {
            type: 'warning'
        }).then(() => {
            that.api.post('authGoods', { ids: ids }, res => {
                that.query.page = 1;
                that.$message.success('授权成功');
                this.authVisible = false;
                that.getList();
                that.multipleSelection = [];
            }, undefined, undefined, this);
        }).catch(() => { });
    },
    };
  },

  watch: {

  },
  created () {
    this.api.get('getGoodsAll', {}, res => {
      this.goodsAll = res.data.list;
    });
    this.getList();
  },
  methods: {
    //设置商品属性
    goodsChange (id, index, key) {
      this.api.put('setGoods', { id: id, key: key }, res => {
        this.$message.success(res.msg);
        this.tableData[index][key] = res.data.val;

      });
    },

    handleEdit (index, row) {
      if (index < 0) {
        this.formName = '添加商品';
        this.edit = { to_goods: '' ,info:{jues_name:'',yxsl_num:0,pifu_num:0,dianchang_pifu_num:0,xyf_val:0,vip_grade:'',duanwei:'',pws_ok:'',deposit:0,game_id:0}};
      } else {
        this.formName = '编辑商品';
        let banner = [];
        for (let i in row.banner) {
          banner[banner.length] = {
            name: '预览',
            url: row.banner[i]
          };
        }
        console.log(row)
        this.edit = row;
        this.edit.banner_url = banner;
        let images = [];
        for (let i in row.images) {
          images[images.length] = {
            name: '预览',
            url: row.images[i]
          };
        }
        row.to_goods = row.to_goods.toString();
        this.edit = row;
        this.edit.banner_url = banner;
        this.edit.images_url = images;

        if (this.edit.info){
            this.edit.info
        }
      }
      this.editVisible = true;
        this.api.get('getGameAttr', {ids:  this.edit.attr_ids,game_id: this.edit.game_id,wzry_glid:this.attr_query.wzry_glid}, res => {
            this.attr_data = res.data.attr_data;
            this.pifu_data = res.data.pifu_data;
        }, undefined, undefined, this);
    },

    handleSave () {
      if (this.edit && this.edit.id) {
        this.api.put('editGoods', this.edit, res => {
          this.$message.success(res.msg);
          this.editVisible = false;
          this.getList();
        });
      } else {
        this.api.post('addGoods', this.edit, res => {
          this.$message.success(res.msg);
          this.editVisible = false;
          this.getList();
        });
      }
    },

    /***
     * 超出上传限制事件
     */
    uploadExceed () {
      this.$message.error('只能上传6张图片');
    },

    /***
     * 添加banner预览
     */
    uploadPreview (file) {
      this.windowsPopVisible = true;
      this.windowsPopUrl = file.response.data.url;
    },

    /***
     * 关闭预览
     */
    closePreviews () {
      this.windowsPopVisible = false;
    },

    /***
     * 添加banner上传成功事件
     */
    uploadSuccess (response, file, fileList) {
      console.log(fileList)
      if (response.code != 1000) {
        this.$message.error(response.msg);
        return false;
      }
      let banner = [];
      for (let i in fileList) {
        banner[banner.length] = fileList[i].response.data.url;
      }
      this.edit.banner = banner;
    },
    imagesUploadSuccess (response, file, fileList) {
      if (response.code != 1000) {
        this.$message.error(response.msg);
        return false;
      }
      let images = [];
      for (let i in fileList) {
        images[images.length] = fileList[i].response.data.url;
      }
      this.edit.images = images;
    },
    /***
     * 添加banner上传失败事件
     */
    uploadError (response, file, fileList) {
      this.$message.error('上传失败');
    },

    // 触发搜索按钮
    handleSearch () {
      this.$set(this.query, 'page', 1);
      this.getList();
    },

    /**
     * 操作状态
     */
    updateStatus (id, index, status) {
      let str = '';
      if (status == 4) {
        str = '驳回';
      } else if (status == 5) {
        str = '审批';
      } else {
        str = status == 1 ? '下架' : '上架';
      }
      this.$confirm('确定要' + str + '吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.api.put('goodsStatus', { id: id, status: status }, res => {
          this.$message.success(res.msg);
          if (res.data.status == 4) {
            this.getList();
          }
          this.tableData[index].status = res.data.status;

        });
      }).catch(() => { });

    },


    // 多选操作
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
      attrhandleSelectionChange (val) {
          this.cateattrmultipleSelection = val;
      },
      depositType (val) {
        if (val == 2){
            this.depositTypeShow = true
        } else {
            this.depositTypeShow = false
        }
      },
    cateattrhandleSearch () {
          this.$set(this.attr_query, 'page', 1);
          this.gameCateAttrList();
      },
    // 删除操作
    handleDelete (index, row) {
      this.delLists([row.id], '删除成功');
    },
    //批量删除
    delAllSelection () {
      const length = this.multipleSelection.length;
      let str = '';
      this.delList = this.delList.concat(this.multipleSelection);
      let ids = [];
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].name + ' ';
        ids.push(this.multipleSelection[i].id);
      }
      this.delLists(ids, `删除了${str}`);
    },

    // 分页导航
    handlePageChange (val) {
      this.$set(this.query, 'page', val);
      this.getList();
    },
      // 分页导航
    cateattrhandlePageChange (val) {
          this.$set(this.attr_query, 'page', val);
          this.gameCateAttrList();
    },
      // game bankuai
      showGame(val){
          this.gameCateListVisible=true
          this.attr_query.game_id = val||0
          this.edit.game_id = val||0
          this.getCate()
          this.gameCateAttrList()
      },
      wangzheGuanlian(id){
          this.gameCateListVisible=true
          this.attr_query.wzry_glid = id ||0
          this.getCate()
          this.gameCateAttrList()
      },
      del_attr(id){
          var index = this.attr_ids.indexOf(id);
          if(index>-1){//大于0 代表存在，
              this.attr_ids.splice(index,1);//存在就删除
              this.addCate(2)
          }
      },
      getCate(){
          this.api.get('getGameCate', {'is_all':1,game_id:this.attr_query.game_id,}, res => {
              this.gameCateAll = res.data.list;
          });
      },
      gameCateAttrList(){
          let that = this;
          this.api.get('gameCateAttrList', this.attr_query, res => {
              that.AttrtableData = res.data.list;
              that.AttrpageTotal = res.data.pageTotal;
          }, undefined, undefined, this);

      },
      cateChildClick (id=0) {
          if (id>0){
              this.attr_query.left_two_id = id
          }
          this.gameCateAttrList();
      },
      CatedelattrSelection () {
          const length = this.cateattrmultipleSelection.length;
          let str = '';
          this.cateattrdelList = this.cateattrdelList.concat(this.cateattrmultipleSelection);
          let ids = [];
          for (let i = 0; i < length; i++) {
              str += this.cateattrmultipleSelection[i].name + ' ';
              ids.push(this.cateattrmultipleSelection[i].id);
              this.attr_ids.push(this.cateattrmultipleSelection[i].id);
          }
          this.addCate(1);
          this.gameCateListVisible=false
      },
      addCate: function (type = 1) {
          let ids = this.attr_ids
          let that = this;
          if (type == 1){
              if (!ids || ids.length < 1) {
                  this.$message.error('操作数据为空');
                  return false;
              }
          }
          // 二次确认删除
          // this.$confirm('确定要添加吗？', '提示', {
          //     type: 'warning'
          // }).then(() => {
          //     // that.api.post('addGoodsGameAttr', { ids: ids }, res => {
          //     //     that.catemultipleSelection = [];
          //     //     that.cate_query.page = 1;
          //     //     that.gameCateAttrList();
          //     //     that.$message.success(msg);
          //     // });
          //
          // }).catch(() => { });
          that.edit.attr_ids = ids;
          that.api.get('getGameAttr', {ids: ids,game_id: this.attr_query.game_id,wzry_glid:this.attr_query.wzry_glid}, res => {
              that.attr_data = res.data.attr_data;
              that.pifu_data = res.data.pifu_data;
          }, undefined, undefined, this);
          that.$message.success('成功');

      },
      changAttr(o,index){
          this.attr_data[index].html_txt = '<i class="el-icon-circle-check"></i><el-button type="text" class="button" >已选择</el-button>'
      },
      contentChange2 (val) {
          this.edit.describe = val;
      },
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.table .goods_name{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 定义文本的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.t-tag {
    cursor: pointer;
}
</style>
<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }
    .game_t{
        display: flex;justify-content: space-around;align-items: center
    }
    .game_t0{
        padding: 8px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    .auth_pop{
        color: #ffffff;
        font-style: 15px;
        font-weight: bold;
        background-color: #409EFF !important;
        padding: 10px;
        text-align: center;
        border-radius: 12px;
        width: 35%;
        margin: 10px auto;
    }
    .auth_pop_btn{
        background-color: darkseagreen !important;
        color: #ffffff;
        padding: 5px;
        border-radius: 15px;
        margin: 0 5px;
    }
</style>
